<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>登录</title>

    <!-- Bootstrap -->
    <link href="bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/login.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <div class="row">
        欢迎登录
    </div>
    <div class="row">
        <form class="form-horizontal" action="login" method="post">
            <div class="form-group">
                <label for="inputloginId" class="col-sm-offset-2 col-sm-2 control-label">用户名</label>
                <div class="col-sm-4">
                    <input id="inputloginId" type="text" class="form-control input-lg" placeholder="请输入用户名" name="login_id">
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword" class="col-sm-offset-2 col-sm-2 control-label">密 &nbsp; 码</label>
                <div class="col-sm-4">
                    <input type="password" class="form-control input-lg" id="inputPassword" placeholder="请输入密码" name="password">
                </div>
            </div>
            <div class="form-group login-text-box">
                <div class="col-sm-offset-4 col-sm-4">
                    <a href="register.jsp">还没有账户?去注册</a>
                    <a id="reset-password" href="reset-password?login_id=">忘记密码?</a>
                </div>
            </div>
            <div class="form-btn">
                <input type="submit" class="btn btn-success btn-lg" value="立&nbsp;即&nbsp;登&nbsp;录">
            </div>

        </form>
    </div>
</div>
</body>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="jQuery/jquery-3.5.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<!--<script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>-->
</html>
<script>
	/**
	 *
	 * 如何实现简单的重置密码  用户名在表单的input框中 ，忘记密码的a标签也是在HTML中  HTML并不能直接获取input的值，jsp也不可以
	 * 方法一:a标签禁用默认的点击事件，添加额外点击事件(js代码)，点击时，获取input的值，跟url一起拼接，通过异步发送请求，但是就异步了
	 * 方法二(目前我用的方法,下面的代码就是):给input一个聚焦事件，监听用户的鼠标是否离开了用户名的输入框，一旦离开，获取到input的值，再获取到a标签的
	 * href属性值，两者拼接起来，再赋值给a标签的href,用户仍然点击a标签，触发的还是a标签的默认事件，代码如下；
	 *
	 *
	 * */
	// 入口函数，jsp(就是html)页面在用户的浏览器上缓冲完再加载这个函数
	$(function () {
		// 获取鼠标的聚焦时间，针对用户名的输入框，触发事件后，会执行回调函数里的代码
		$('#inputloginId').blur(function () {
			// 拿到a标签的属性 href 也就是URL的前半段
			let url = $('#reset-password').attr('href');
            // 再获取 input 中  用户输入的用户名
			let login_id = $('#inputloginId').val();
			console.log(url, login_id)
            // 把他俩字符串加起来 再赋值给 href
			$('#reset-password').attr('href', url + login_id);
		});
	})
</script>